<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		@charset "utf-8";

		body,
		ul {
			padding: 0px;
			margin: 0px;
		}

		/*地图*/

		#map {
			position: relative;
			width: 1200px;
			height: 600px;
			/* background: url(./img/1.jpg); */
		}

		/*路*/

		#road {
			position: absolute;
			z-index: 2;
			left: 250px;
			top: 200px;
			/* background: url(./img/8.png); */
			width: 755px;
			height: 110px;
			z-index: 10;
		}

		/*植物*/

		#road .plant {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 0px;
			bottom: 0px;
			margin: auto 0px;
		}

		/*僵尸*/

		#road .createZombies {
			position: absolute;
			height: 128px;
			width: 66px;
			top: 0px;
			bottom: 0px;
			right: 0px;
			margin: auto 0px;
			z-index: 1000;
		}

		/*子弹*/

		#road .bullet {
			position: absolute;
			width: 35px;
			height: 35px;
			top: 0px;
			bottom: 0px;
			margin: auto 0px;
			z-index: 1001;
		}

		/*道具栏*/

		#props {
			position: absolute;
			bottom: 0px;
			left: 100px;
			z-index: 1000;
			background: gainsboro;
			list-style: none;
			text-align: center;
		}

		#props li {
			position: relative;
			display: inline-block;
			height: 50px;
			width: 50px;
		}

		#props li span {
			position: absolute;
			padding: 2px;
			right: 2px;
			top: 2px;
			border-radius: 100%;
			background: gold;
		}

		#props li img {
			border: 2px solid gray;
			height: 100%;
			width: 100%;
			cursor: pointer;
		}

		#props li img.action {
			border: 3px solid green;
		}

		/*星星数量*/

		#star-number {
			position: absolute;
			z-index: 1000;
			height: 50px;
			width: 50px;
			border-radius: 50px;
			text-align: center;
			line-height: 50px;
			background: gold;
			color: white;
			font-weight: 900;
			font-size: 20px;
		}

		/*降落星星*/
		.star {
			position: absolute;
			width: 50px;
			height: 50px;
			z-index: 1000;
		}
	</style>
</head>

<body>
	<div id="map">
		<div id="road"></div>
		<ul id="props">
			<li><img src="./img/4.gif" class="plant" /><span>25</span></li>
			<li><img src="./img/Wallnut_body.png" class="plant" /><span>50</span></li>
		</ul>
		<div id="star-number">25</div>
	</div>
</body>
<script>
	// 1.掉落星星、点击吃掉星星增加积分
	// 2.购买植物并放置在草地上、购买需要支付一定的星星、星星余额不足不能购买星星
	// 3.植物与僵尸有血量、射速、护甲值一类的属性
	// 4.定时发送炮弹、产生僵尸、炮弹触碰僵尸与僵尸触碰植物时，会经过自身属性转换伤害、根据血量不同展示
	// 不同的状态图片

	var $ = function (dom) {
		return document.querySelector(dom)
	}
	// 星星
	var Star = function () {
		this.star_child = document.createElement('img');
	}
	Star.prototype = {
		constructor: Star,
		down_speed: 0,
		down_star_timer: null,
		clear_star: null,
		create_time: Math.floor((Math.random() * 3) + 1) * 1000,
		createStar: function () {
			this.star_child.style.width = '50px';
			this.star_child.style.height = '50px';
			this.star_child.style.position = 'absolute';
			this.star_child.style.zIndex = '999';
			this.star_child.style.left = Math.floor(Math.random() * ($('#map').offsetWidth - this.star_child.width)) + 'px';
			this.star_child.style.top = this.down_speed + 'px';
			this.star_child.src = './img/sun.gif';
			this.star_child.style.cursor = 'pointer';
			$('#map').appendChild(this.star_child);
			this.down_star_timer = setInterval(this.star_move.bind(this), 14);
			setTimeout(function () {
				var star = new Star();
				star.createStar().star_move().handle_star();
			}, this.create_time);
			return this;
		},
		star_move: function () {
			var top = $('#map').offsetHeight;
			if (this.down_speed >= top - this.star_child.offsetHeight) {
				clearInterval(this.down_star_timer)
			} else {
				this.star_child.style.top = ++this.down_speed + 'px';
			}
			return this;
		},
		handle_star: function () {
			var object_star = this;
			this.star_child.addEventListener('click', function () {
				var current = this;
				clearInterval(object_star.down_star_timer)
				object_star.clear_star = setInterval(function () {
					var ratio = current.offsetLeft / current.offsetTop;
					current.style.top = current.offsetTop - current.offsetTop / current.offsetLeft * 4 + 'px';
					current.style.left = current.offsetLeft - current.offsetLeft / current.offsetTop * 4 + 'px';
				}, 16);
				if (current.style.top <= 0 || current.style.left <= 0) {
					$('#map').removeChild(current);
					clearInterval(object_star.down_star_timer);
				}
			}, false)
		}
	}
	var star = new Star();
	star.createStar().star_move().handle_star()
</script>

</html>